<template>
	<div class="pageSetting">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:toolbar-config="toolbarConfig"
			:pager-config="pageConfig"
			:edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
			@page-change="pageChange"
		>
			<template #whetherEnable="{ row }">
				<span>{{ whetherEnableObject[row.whetherEnable] }}</span>
			</template>
			<template #toolbar_buttons>
				<el-input
					v-model="title"
					placeholder="标题名称"
					size="small"
					style="width: 200px"
					clearable
					@keyup.enter.native="handlerSearch"
				>
				</el-input>

				<el-select
					v-if="orgIds == 1 ? true : false"
					v-model="orgId"
					filterable
					placeholder="组织机构"
					remote
					:remote-method="remoteMethod"
					@input="sllectChange"
				>
					<el-option
						v-for="item in orgList"
						:key="item.id"
						:label="item.orgName"
						:value="item.id"
					/>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="handlerSearch" />
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)">
					编辑
				</el-button>
				<el-button type="text" size="small" @click="handlerDelRow(row)">
					删除
				</el-button>
			</template>
		</shyt-table>

		<addArticleVue
			:form-title="formTitle"
			:visible.sync="visible"
			:cur-data.sync="curData"
			:cur-data-copy.sync="curDataCopy"
			:dict-publish="dictPublish"
			:tag-data="tagData"
			:article-type="articleType"
			@submit="handlerSubmit"
		></addArticleVue>
	</div>
</template>

<script>
import {
	articleInsert,
	articleDelete,
	getArticlePageList,
	getArticleModel,
	getTagList,
	articleUpdate,
	articleAuthorData,
} from '@/http/article'
import { getOrgHospitalList } from '@/http/org'
import { delImageUpload } from '@/http/upLoad'
import { mapGetters } from 'vuex'
import addArticleVue from './components/addArticle.vue'

export default {
	name: 'ArticleSetting',
	components: {
		addArticleVue,
	},
	data() {
		return {
			//分页配置
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 100,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
			// 查询参数
			title: '',
			//组织机构ID
			orgId: '',

			//组织机构ID
			orgIds: 1,

			tagParam: {
				orgId: '',
			},

			tableData: [], //表格数据
			$table: null,
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			formTitle: '', //表单标题
			visible: false,
			orgList: [], //组织机构
			//表单页面数组
			curData: {
				publish: '', //是否发布，默认发布
				author: '', //作者
				sketch: '',
				title: '',
				articleJson: '',
				articleType: '',
				tagList: '',
			},
			curDataCopy: { articleJson: '' },
			// 是否发布字典数组
			dictPublish: [
				{
					value: '0',
					label: '发布',
				},
				{
					value: '1',
					label: '不',
				},
			],

			//文章发布类型
			articleType: [
				{
					value: '0',
					label: '普通文章',
				},
				{
					value: '1',
					label: '健康咨询',
				},
				{
					value: '2',
					label: '医院简介',
				},
			],
			//标签数据
			userData: {},
			//标签数据
			tagData: [],
			//组织机构
			orgParam: {
				officeType: '',
				orgNameOrInputCode: '',
			},
		}
	},
	computed: {
		...mapGetters(['userMsg']),
	},
	created() {
		this.getOrgList(1)
		//表格页面
		this.setTableColumn()
		//初始化分页数据
		this.pageList()
		this.getTagData()
	},

	mounted() {
		this.$table = this.$refs.shytTable.$refs.xTable
	},

	methods: {
		//  设置表格列
		setTableColumn() {
			let _this = this
			_this.columns = [
				{
					field: 'title',
					title: '标题',
				},
				{
					field: 'orgName',
					title: '所属机构',
				},
				{
					field: 'deptName',
					title: '所属科室',
				},
				{
					field: 'author',
					title: '作者',
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			]
		},

		//获得标签数据
		getTagData() {
			this.tagParam.orgId = this.orgId
			getTagList(this.tagParam).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.tagData = data.data
				}
			})
		},

		remoteMethod(query) {
			this.getOrgList(1, query.toUpperCase())
		},

		sllectChange(index) {
			this.optionsId = this.options[index].id
			this.optionsName = this.options[index].orgName
		},
		//组织机构数据
		getOrgList(officeType, orgNameOrInputCode) {
			this.orgParam.officeType = officeType
			this.orgParam.orgNameOrInputCode = orgNameOrInputCode
			getOrgHospitalList(this.orgParam).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.orgList = data.data
				}
			})
		},

		//作者数据
		getAuthorData() {
			articleAuthorData().then(({ data }) => {
				if (data?.head?.code == 200) {
					this.curData.author = data.data.author
					this.curData.publish = '0'
				}
			})
		},

		//查询
		handlerSearch() {
			this.pageList()
		},
		// 翻页事件
		pageChange({ currentPage, pageSize }) {
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
			this.pageList()
		},

		//获得分页数据
		pageList() {
			console.log(this.userMsg)
			let queryParams = {
				pageNum: this.pageConfig.currentPage,
				pageSize: this.pageConfig.pageSize,
				title: this.title,
			}
			getArticlePageList(queryParams).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.tableData = data.data.records
					this.pageConfig.total = data.data.total
				}
			})
		},
		//提交数据
		handlerSubmit(formData, removeList) {
			let res = { ...formData }
			if (!res.id) {
				articleInsert(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('新增成功')
						this.visible = false
						this.pageList()
					}
				})
			} else {
				articleUpdate(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('编辑成功')
						this.visible = false
						this.pageList()
					}
				})
			}
			if (removeList.length > 0) {
				removeList.forEach(i => {
					delImageUpload({ imagePath: i }).then(res => {
						console.log(res)
					})
				})
			}
		},
		//新增数据
		handlerAddClick() {
			this.formTitle = '文章资讯新增'
			this.visible = true
			this.getAuthorData()
		},
		//编辑数据
		async handlerEditRow(row) {
			this.formTitle = '文章资讯编辑'
			await this.getArticleModelData(row)
			this.visible = true
		},

		async getArticleModelData(row) {
			return getArticleModel({ id: row.id }).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.curData = data.data
					this.curDataCopy = this._.cloneDeep(data.data)
				}
			})
		},

		//删除数据
		handlerDelRow(row) {
			this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					articleDelete({ id: row.id }).then(({ data }) => {
						if (data?.head?.code == 200) {
							this.$message.success('删除成功')
							this.pageList()
						}
					})
				})
				.catch(() => {})
		},
	},
}
</script>

<style lang="scss" scoped>
.dictSetting {
	height: 100%;
	display: flex;
	.dictSetting-left {
		border-right: 1px solid #ccc;
		padding: 10px;
		box-sizing: border-box;
		width: 40%;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.type-list {
			height: calc(100% - 22px - 28px);
			padding-top: 20px;
			box-sizing: border-box;
			.item-active {
				background: #ecf5ff;
			}
			.type-list-item {
				height: 40px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e4e7ed;
				box-sizing: border-box;
				transition: all 0.3s;
				&:first-child {
					border-top: 1px solid #e4e7ed;
				}
				&:hover {
					background: #e4e7ed;
				}
			}
			.type-list-none {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: 500;
				color: #909399;
			}
		}
	}
	.dictSetting-right {
		flex: 1;
		padding: 10px;
		box-sizing: border-box;
		box-align: border-box;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.article-list {
			padding-top: 20px;
			box-sizing: border-box;
			height: calc(100% - 22px - 28px);
		}
	}
}
</style>
